<template>
  <div>
    <el-button type="primary" style="float: left;margin-bottom: 10px;" :size="size" @click="handleRefresh">刷新</el-button>
    <el-button type="primary" style="float: left;margin-bottom: 10px;" :size="size" @click="viewDetails" icon="el-icon-plus"
               v-if="!readonly" >新增</el-button>
    <el-table :data="tableData" :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }" style="width: 100%" :size="size">
      <el-table-column type="index" width="45"> </el-table-column>
      <el-table-column width="40" v-if="!readonly">
        <template slot-scope="scope">
          <i class="el-icon-delete icon_style" @click="handleDelete(scope.row)"></i>
        </template>
      </el-table-column>
      <el-table-column width="40" v-if="!readonly">
        <template slot-scope="scope">
          <i class="el-icon-sort icon_style" @click="handleSort(scope.row)"></i>
        </template>
      </el-table-column>
      <el-table-column width="40">
        <template slot-scope="scope">
          <i :class="readonly ? 'el-icon-view icon_style' : 'el-icon-edit icon_style'" :title="readonly ? '查看' : '编辑'"
             @click="examine(scope.row)"></i>
        </template>
      </el-table-column>
      <el-table-column prop="casebookName" label="Casebook名称" width="180">
      </el-table-column>
      <el-table-column prop="visitNum" label="访视数" width="180">
      </el-table-column>
      <el-table-column prop="casebookType" label="公共Casebook" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.casebookType == 1">是</span>
          <span v-if="scope.row.casebookType == 2">否</span>
        </template>
      </el-table-column>
      <el-table-column prop="showgong" label="显示条件" min-width="800">
        <template slot-scope="scope">
          <span v-if="scope.row.showConditions">{{ scope.row.showConditions.length>0?getConditionTxt(scope.row):'' }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 排序 -->
    <el-dialog title="排序" width="500px" :visible.sync="openSort">
      <el-form label-width="160px" style="text-align: left" :size="size">
        <el-form-item label="目标顺序：">
          <el-select v-model="targetId" placeholder="请选择" filterable clearable>
            <el-option v-for="item in tableData" :key="item.id" :label="item.casebookName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="openSort = false">取消</el-button>
        <el-button :size="size" type="primary" @click.native="submitSort">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  components: {
  },
  data() {
    return {
      size: 'mini',
      addPopup: false,
      openSort: false,
      targetId: '',
      optionId: '',
      orEdit: false,
      flag: false,
      tableData: [],
      edcDataBaseId: '',
      displayList: [],
      readonly: false, // 页面是否只读的标识
      environment: '',
    }
  },
  mounted() {
    const databaseInfo = JSON.parse(localStorage.getItem('sys-database-info')) || {}
    if (databaseInfo.isLock === '1') {
      this.readonly = true
    }

    this.edcBuildProjectId = localStorage.getItem('sys-project-id') || ''
    this.edcDataBaseId = databaseInfo.databaseId || ''
    this.dataBaseVersion = databaseInfo.databaseVersion || ''
    this.environment = sessionStorage.getItem('environment') || '0'

    this.getDisplayCondition()
    this.findPage()
  },
  methods: {
    ...mapActions('visitDesign', [
      'visitCasebookList',
      'visitCasebookShowConditions',
      'visitCasebookDelete',
      'casebookSortChange'
    ]),
    // 获取显示条件
    getDisplayCondition () {
      const params = {
        databaseId: this.edcDataBaseId,
        projectId: this.edcBuildProjectId,
        databaseVersion: this.dataBaseVersion,
        environment: this.environment
      } 
      this.visitCasebookShowConditions({ params })
        .then((res) => {
          if (res.code === 200) {
            this.displayList = res.data
          }
        })
        .catch((error) => {
          this.tableloading = false
          this.$message.error(error)
        })
    },

    // 刷新列表数据
    handleRefresh() {
      this.findPage()
    },
    /**
     * 获取显示条件文字
     */
    getConditionTxt(rowData) {
      const list = []
      if (rowData.showConditions.length > 0) {
        for (const useCon of rowData.showConditions) {
          for (const dis of this.displayList) {
            if (useCon.visitId === dis.visitId && dis.visitTables) {
              for (const vis of dis.visitTables) {
                if (useCon.visitTableId === vis.visitTableId && vis.fields) {
                  for (const fie of vis.fields) {
                    if (useCon.tableField === fie.fieldKey && fie.fieldValues) {
                      for (const fieval of fie.fieldValues) {
                        if (useCon.fieldValue === fieval.fieldValue) {
                          list.push(dis.visitName + ':' + vis.tableName + ':' + fie.fieldName + ':' + fieval.valueName)
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      return list.join('|')
    },
    // 新增
    viewDetails() {
      this.$router.push({
        path: '/Processdesign',
        query: {
          casebookId: null,
          displayList: JSON.stringify(this.displayList),
          sort: this.tableData.length > 0 ? this.tableData[this.tableData.length - 1].sortNum : 0
        }
      })
    },
    // 编辑设计
    examine(data) {
      localStorage.setItem('interview-distplay-list', JSON.stringify(this.displayList))
      this.$router.push({
        path: '/Processdesign',
        query: {
          casebookId: data.id,
          casebookType: data.casebookType,
          // displayList: JSON.stringify(this.displayList),
          casebookName: data.casebookName
        },
      })
    },
    // 排序
    handleSort(data) {
      this.openSort = true
      this.targetId = data.id
      this.optionId = data.id
    },
    // 排序提交
    submitSort() {
      if (this.targetId === '') {
        this.$message({
          type: 'error',
          message: '请选择目标顺序！'
        })
        return
      }
      if (this.optionId === this.targetId) {
        this.$message({
          type: 'error',
          message: '请选择与节点不同的目标节点！',
        })
        return
      }
      const data = {
        optionId: this.optionId,
        targetId: this.targetId
      }
      this.casebookSortChange({ data }).then((res) => {
        if (res.code === 200) {
          this.findPage()
          this.openSort = false
          this.$message({
            type: 'success',
            message: '排序成功',
          })
        }
      })
    },
    // 获取数据
    findPage: function () {
      this.tableloading = true
      const params = {
        databaseId: this.edcDataBaseId,
        projectId: this.edcBuildProjectId,
        databaseVersion: this.dataBaseVersion,
        environment: this.environment
      }
      this.visitCasebookList({ params })
        .then((res) => {
          if (res.code === 200 && res.data != null) {
            this.tableData = res.data
            this.tableloading = false
          } 
        })
    },
    // 删除
    handleDelete (row) {
      const params = {
        id: row.id
      }
      this.$confirm('确认删除吗？', '提示', { type: 'warning' })
        .then(() => {
          this.visitCasebookDelete({ params }).then(res => {
            if (res.code === 200) {
              this.$message({ message: '删除成功', type: 'success' })
              this.findPage()
            }
          })
        })
    }
  },
}
</script>

<style lang="scss" scoped>
.icon_style {
  cursor: pointer;
}
// /deep/.el-table__body-wrapper tbody{
//     transform: scaleY(-1);
//   }
//   /deep/.el-table__empty-text {
//      transform: scaleY(-1);
//   }
</style>